<template>
  <div>
    <br />
    学生名字：
    <el-input size="mini" v-model="vacationQueryDO.studentName" placeholder="请输入学生姓名" style="width:120px"></el-input>
    &nbsp;
    学生学号：
    <el-input size="mini" v-model="vacationQueryDO.studentNumber" placeholder="请输入学生学号" style="width:120px"></el-input>
    &nbsp;
    请假类型：
    <el-select size="mini" v-model="vacationQueryDO.vacationType" placeholder="请选择" style="width:100px">
      <el-option key label="请选择" value></el-option>
      <el-option key="0" label="病假" value="0"></el-option>
      <el-option key="1" label="事假" value="1"></el-option>
      <el-option key="2" label="放假" value="2"></el-option>
      <el-option key="3" label="其他" value="3"></el-option>
    </el-select>&emsp;
    状态：
    <el-select size="mini" v-model="vacationQueryDO.state" placeholder="请选择" style="width:100px">
      <el-option key label="请选择" value></el-option>
      <el-option key="0" label="等待审核" value="0"></el-option>
      <el-option key="1" label="已同意" value="2"></el-option>
      <el-option key="2" label="未同意" value="1"></el-option>
    </el-select>&emsp;
    <el-button icon="el-icon-refresh-right" slot="trigger" size="mini" type="info" @click="clearQueryData()">重置
    </el-button>
    <el-button icon="el-icon-check" slot="trigger" size="mini" type="primary" @click="creatQueryData()">确定
    </el-button>
    <el-table v-loading="loading" :data="vacationQueryDO.pageBean.data" style="width: 100%;margin-top: 7px;" highlight-current-row
      border>
      <el-table-column align="center" type="index" label="序号" width="50px" />
      <el-table-column align="center" prop="vacationType" label="请假类型" width="80px">
        <template slot-scope="scope">
          <el-tag type="info" effect="light" v-if="scope.row.vacationType == 0">病假</el-tag>
          <el-tag type="warning" effect="light" v-else-if="scope.row.vacationType == 1">事假</el-tag>
          <el-tag effect="light" v-else-if="scope.row.stvacationTypeate == 2">放假</el-tag>
          <el-tag type="danger" effect="light" v-else-if="scope.row.stvacationTypeate == 3">其他</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="vacationDescribe" label="请假理由" width="150px" />
      <el-table-column align="center" prop="startTime" label="开始时间" width="160px" />
      <el-table-column align="center" prop="endTime" label="结束时间" width="160px" />
      <el-table-column align="center" prop="studentName" label="学生名字" width="80px" />
      <el-table-column align="center" prop="studentNumber" label="学号" width="150px" />
      <el-table-column align="center" prop="studentPhone" label="学生联系方式" width="120px" />
      <el-table-column align="center" prop="studentParent" label="学生家长" width="80px" />
      <el-table-column align="center" prop="studentParentPhone" label="家长联系方式" width="120px" />
      <el-table-column align="center" prop="counsellor" label="辅导员" width="80px" />
      <el-table-column align="center" prop="applyTime" label="申请时间" width="160px" />
      <el-table-column align="center" prop="state" label="状态" width="95px">
        <template slot-scope="scope">
          <el-tag type="warning" effect="dark" v-if="scope.row.state == 0">等待审核</el-tag>
          <el-tag type="success" effect="dark" v-else-if="scope.row.state == 2">已同意</el-tag>
          <el-tag type="danger" effect="dark" v-else-if="scope.row.state == 1">未同意</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <div v-if="scope.row.state == 0">
            <el-button size="mini" type="primary" @click="instruct(scope.$index, scope.row)">批示</el-button>
          </div>
          <div v-if="scope.row.state != 0">
            <el-popover placement="left-start" title="批示" width="200" trigger="hover" :content="scope.row.instruct">
              <el-tag type="primary" slot="reference">查看批示</el-tag>
            </el-popover>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="vacationQueryDO.pageBean.currPage"
        :page-sizes="pageSizes"
        :page-size="vacationQueryDO.pageBean.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="vacationQueryDO.pageBean.totalNum"
    ></el-pagination>
    <el-dialog title="批示" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="vacationDO">
        <el-form-item label="是否同意" label-width="140px">
          <el-radio v-model="vacationDO.state" label="2">同意</el-radio>
          <el-radio v-model="vacationDO.state" label="1">不同意</el-radio>
        </el-form-item>
        <el-form-item label="批示" label-width="140px">
          <el-input v-model="vacationDO.instruct" style="width:200px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleInstruct">取 消</el-button>
        <el-button type="primary" @click="submitInstruct">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import RoomView from '../room/RoomView.vue';
export default {
  components: { RoomView },
  data() {
    return {
      pageSizes: [5, 10, 20, 50],
      dialogFormVisible: false,
      loading: true,
      vacationDO: {
        id: "",
        state: "",
        instruct: "",
      },
      vacationQueryDO: {
        studentId: "",
        teacherId: "2208",
        vacationType: "",
        studentNumber: "",
        studentName: "",
        searchStartTime: "",
        searchEndTime: "",
        state: "",
        pageBean: {
          currPage: 1,
          pageSize: 10,
          totalPages: 0,
          totalNum: 0,
          data: [],
        },
        index: "",
      },
    };
  },
  created() {

    this.getList();
  },
  methods: {
    handleSizeChange(val) {
      this.vacationQueryDO.pageBean.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.vacationQueryDO.pageBean.currPage = val;
      this.getList();
    },
    getList() {
      this.$axios
        .post("/api/attendance/vacation/list", this.vacationQueryDO)
        .then((r) => {
          this.loading = false;
          this.vacationQueryDO.pageBean = r.data.data;
        });
    },
    instruct(index, row) {
      this.dialogFormVisible = true;
      this.vacationDO.id = row.id;
      this.index = index;
    },
    creatQueryData() {
      this.vacationQueryDO.pageBean.currPage = 1;
      this.getList();
    },
    clearQueryData() {
      this.vacationQueryDO.vacationType = "";
      this.vacationQueryDO.studentNumber = "";
      this.vacationQueryDO.vacationType = "";
      this.vacationQueryDO.studentName = "";
      this.vacationQueryDO.searchStartTime = "";
      this.vacationQueryDO.searchEndTime = "";
      this.vacationQueryDO.state = "";
    },
    submitInstruct() {
      
      this.$axios
        .post("/api/attendance/vacation/instructVacation", this.vacationDO)
        .then((r) => {
          this.dialogFormVisible = false;
          this.vacationQueryDO.pageBean.data[this.index].instruct = this.vacationDO.instruct;
          this.vacationQueryDO.pageBean.data[this.index].state = this.vacationDO.state;
          this.vacationDO.instruct = "";
          this.vacationDO.state = "";
        });
    },
    cancleInstruct() {
      this.dialogFormVisible = false;
      this.vacationDO.instruct = "";
      this.vacationDO.state = "";
    },
  },
};
</script>

<style>

</style>?